import React, { Component, Suspense } from 'react';
import { PageHeaderWrapper } from '@ant-design/pro-layout';
import { connect } from 'dva';
import { Button, Tabs, message } from 'antd';

import styles from './style.less';

import BasicInform from './components/BasicInform'
import BusinessForm from './components/BusinessForm'
import ImpoProduct from './components/ImpoProduct'
import Innovation from './components/Innovation'
import Reward from './components/Reward'
import PrincipalHonor from './components/PrincipalHonor'
import CompanyAppeal from './components/CompanyAppeal'
import RecommendReason from './components/RecommendReason'

import ChangeRecord from './components/ChangeRecord'
import MakeTableRecord from './components/MakeTableRecord'



@connect(({ home, loading }) => ({
    home,
    loading
}))

// eslint-disable-next-line react/prefer-stateless-function
class BasicList extends Component {
    state = {
        key: this.props.match.params.key,
        infoData: {
            profile: {},        // 企业概况
            business: {},       // 企业经营数据
            product: [],        // 主营产品
            innovation: [],     // 科技创新
            reward: [],         // 产业奖励情况
            honor: [],          // 主要荣誉
            appeal: '',         // 企业诉求
            reason: '',          // 自荐入库理由
        },
        change_record: [],
        tabulating_record: [],
        data: {}
    }

    componentDidMount = () => {
        const { dispatch, home, match } = this.props
        // if ( home.status ) {
        //     dispatch({
        //         type: 'home/getHome',
        //         payload: {}
        //     }).then(() => {
        //         this.init()
        //     })
        // } else {
        //     this.init()
        // }

        dispatch({
            type: 'home/getCompanyDetials',
            payload: {
                id: match.params.key,
                home
            }
        }).then(res => {
            this.init(res)
        })
    }

    // 数据初始化
    init = res => {
        console.log('企业基本信息---->>>>>', res)
        const { companyInformation } = this.props.home
        this.setState({
            // 企业信息（录入）
            infoData: res.infoData,
            // 变更记录
            change_record: res.change_record,
            // 制表记录
            tabulating_record: res.tabulating_record,
        })
        // companyInformation.tableBasicList.forEach(val => {
        //     // eslint-disable-next-line eqeqeq
        //     console.log(val)
        //     console.log(this.state.key)
        //     if (this.state.key == val.key) {
        //         // this.setState({
        //         //     // 企业信息（录入）
        //         //     infoData: val.details_information,
        //         //     // 变更记录
        //         //     change_record: val.change_record,
        //         //     // 制表记录
        //         //     tabulating_record: val.tabulating_record,
        //         //     data: val
        //         // })
        //         console.log(val)
        //         this.setState({
        //             // 企业信息（录入）
        //             infoData: res.infoData,
        //             // 变更记录
        //             change_record: res.change_record,
        //             // 制表记录
        //             tabulating_record: res.tabulating_record,
        //             data: val
        //         })
                
        //     }
        // })
    }

    // 企业概况 编辑
    basicInform_confirm = params => {
        const { dispatch, home } = this.props
        const { key } = this.state
        dispatch({
            type: 'home/edit_basicInform',
            payload: { params, home, key }
        }).then(res => {
            if (res === 'OK') {
                message.success("成功！")
                const { infoData } = this.state
                infoData.profile = {...infoData.profile, ...params}
                this.setState({ infoData })
            }
        })
    }

    // 经营情况 编辑
    businessForm_confirm = params => {
        const { dispatch, home } = this.props
        const { infoData, key } = this.state
        console.log(params)

        if (infoData.business.hasOwnProperty('Id')) {
            // 有Id是编辑
            console.log('编辑')
            const id = infoData.business.Id
            dispatch({
                type: 'home/edit_businessForm',
                payload: { params, home, id, key }
            }).then(res => {
                // eslint-disable-next-line no-shadow
                const { infoData } = this.state
                infoData.business = params
                this.setState({ infoData })
                if (res === 'OK') { message.success("成功！") }
            })
        } else {
            // 没Id是新增
            dispatch({
                type: 'home/add_businessForm',
                payload: { params, home, key }
            }).then(res => {
                // eslint-disable-next-line no-shadow
                const { infoData } = this.state
                infoData.business = params
                this.setState({ infoData })
                if (res === 'OK') { message.success("成功！") }
            })
        }
    }

    // 主营产品
    impoProduct_confirm = (params, type, productkey) => {
        const { dispatch, home } = this.props
        const keys = this.state.key
        console.log(params)
        // 新增
        if (type && type === 'add') {
            dispatch({
                type: 'home/postProductForm',
                payload: { params, home, keys }
            }).then(res => {
                const { infoData } = this.state
                const newList = infoData
                newList.product = res
                this.setState({ infoData: newList })
                message.success("成功！")
            })
            return;
        }
        // 编辑
        dispatch({
            type: 'home/putProductForm',
            payload: { params, home, keys, productkey}
        }).then(res => {
            const { infoData } = this.state
            const newList = infoData
            newList.product = res
            this.setState({ infoData: newList })
            message.success("成功！")
        })
    }

    // 主营产品 删除
    impoProduct_delete = productkey => {
        const keys = this.state.key
        const { dispatch, home } = this.props
        dispatch({
            type: 'home/impoProduct_confirm_delete',
            payload: { home, keys, productkey}
        }).then(res => {
            if (res === 200) {
                message.success("成功！")
            }
        })
    }

    // 科技创新 增加编辑
    innovation_confirm = (params, type, productkey) => {
        const { dispatch, home } = this.props
        const keys = this.state.key

        console.log(params)
        // 新增
        if (type && type === 'add') {
            dispatch({
                type: 'home/postTecForm',
                payload: { params, home, keys }
            }).then(res => {
                const { infoData } = this.state
                const newList = infoData
                newList.innovation = res
                this.setState({ infoData: newList })
                message.success("成功！")
            })
            return;
        }
        // 编辑
        dispatch({
            type: 'home/putTecForm',
            payload: { params, home, keys, productkey}
        }).then(res => {
            const { infoData } = this.state
            const newList = infoData
            newList.innovation = res
            this.setState({ infoData: newList })
            message.success("成功！")
        })
    }

    // 科技创新 删除
    innovation_delete = productkey => {
        const keys = this.state.key
        const { dispatch, home } = this.props
        dispatch({
            type: 'home/innovation_confirm_delete',
            payload: { home, keys, productkey}
        }).then(res => {
            if (res === 200) {
                message.success("成功！")
            }
        })
    }

    // 奖励情况 添加编辑
    reward_confirm = (params, type, productkey) => {
        const { dispatch, home } = this.props
        const keys = this.state.key
        // 新增
        if (type && type === 'add') {
            dispatch({
                type: 'home/postRewardsForm',
                payload: { params, home, keys }
            }).then(res => {
                const { infoData } = this.state
                const newList = infoData
                newList.reward = res
                this.setState({ infoData: newList })
                message.success("成功！")
            })
            return;
        }
        // 编辑
        dispatch({
            type: 'home/putRewardsForm',
            payload: { params, home, keys, productkey}
        }).then(res => {
                const { infoData } = this.state
                const newList = infoData
                newList.reward = res
                this.setState({ infoData: newList })
                message.success("成功！")
        })
    }

    // 奖励情况 删除
    reward_delete = productkey => {
        const keys = this.state.key
        const { dispatch, home } = this.props
        dispatch({
            type: 'home/reward_confirm_delete',
            payload: { home, keys, productkey}
        }).then(res => {
            if (res === 200) {
                message.success("成功！")
            }
        })
    }

    // 主要荣誉 添加编辑
    honor_confirm = (params, type, productkey) => {
        const { dispatch, home } = this.props
        const keys = this.state.key
        // 新增
        if (type && type === 'add') {
            dispatch({
                type: 'home/postHonorForm',
                payload: { params, home, keys }
            }).then(res => {
                const { infoData } = this.state
                const newList = infoData
                newList.honor = res
                this.setState({ infoData: newList })
                message.success("成功！")
            })
            return;
        }
        // 编辑
        dispatch({
            type: 'home/putHonorForm',
            payload: { params, home, keys, productkey}
        }).then(res => {
            const { infoData } = this.state
            const newList = infoData
            newList.honor = res
            this.setState({ infoData: newList })
            message.success("成功！")
        })
    }

    // 主要荣誉 删除
    honor_delete = productkey => {
        const keys = this.state.key
        const { dispatch, home } = this.props
        dispatch({
            type: 'home/honor_confirm_delete',
            payload: { home, keys, productkey}
        }).then(res => {
            if (res === 200) {
                message.success("成功！")
            }
        })
    }

    // 企业诉求
    appeal_save = params => {
        const { dispatch, home } = this.props
        const keys = this.state.key
        dispatch({
            type: 'home/appeal_confirm',
            payload: { params, home, keys }
        }).then(res => {
            if (res === 200) {
                message.success("成功！")
            }
        })
    }

    // 入库理由
    reason_save = params => {
        const { dispatch, home } = this.props
        const keys = this.state.key
        dispatch({
            type: 'home/reason_confirm',
            payload: { params, home, keys }
        }).then(res => {
            if (res === 200) {
                message.success("成功！")
            }
        })
    }

    render (){
        const PageHeaderContent = () => (
            <div className={styles.pageHeaderContent}>
                <div className={styles.headerLeft}>
                    <span className={styles.headerIcon}>icon</span>
                    <span className={styles.headerTitle}>{this.state.infoData.profile ? this.state.infoData.profile.name : ''}</span>
                </div>
                <div className={styles.headerRight}>
                    <Button type="primary" disabled>打印</Button>
                    <Button type="primary" disabled>制表</Button>
                </div>
            </div>
        )

        return (
            <PageHeaderWrapper title={false} className={styles.pageHeaderWrapper} content={<PageHeaderContent/>}>
                <Tabs defaultActiveKey="m"  tabBarStyle={{ backgroundColor: '#fff', paddingLeft: '20px' }}>
                    {/* 企业信息（录入） */}
                    <Tabs.TabPane tab="企业信息（录入）" key="m" >
                        <div style={{ width: '82%', margin: '0 auto' }}>   
                            {/* 企业概况 */}
                            <Suspense fallback={null}>
                                <BasicInform
                                    data={this.state.infoData.profile}
                                    confirm={this.basicInform_confirm}
                                    type="edit"
                                />
                            </Suspense>
                            {/* 企业经营数据 */}
                            <Suspense fallback={null}>
                                <BusinessForm 
                                    data={this.state.infoData.business}
                                    confirm={this.businessForm_confirm}
                                    type="edit"
                                />
                            </Suspense>
                            {/* 主营产品 */}
                            <Suspense fallback={null}>
                                <ImpoProduct
                                    data={this.state.infoData.product}
                                    confirm={this.impoProduct_confirm}
                                    deleteClick={this.impoProduct_delete}
                                    type="edit"
                                />
                            </Suspense>
                            {/* 科技创新（核心技术研发） */}
                            <Suspense fallback={null}>
                                <Innovation
                                    data={this.state.infoData.innovation}
                                    confirm={this.innovation_confirm}
                                    deleteClick={this.innovation_delete}
                                    type="edit"
                                />
                            </Suspense>
                            {/* 产业资金奖励情况 */}
                            <Suspense fallback={null}>
                                <Reward
                                    data={this.state.infoData.reward}
                                    confirm={this.reward_confirm}
                                    deleteClick={this.reward_delete}
                                    type="edit"
                                />
                            </Suspense>
                            {/* 主要荣誉 */}
                            <Suspense fallback={null}>
                                <PrincipalHonor
                                    data={this.state.infoData.honor}
                                    confirm={this.honor_confirm}
                                    deleteClick={this.honor_delete}
                                    type="edit"
                                />
                            </Suspense>
                            {/* 企业诉求 */}
                            <Suspense fallback={null}>
                                <CompanyAppeal
                                    data={this.state.infoData.appeal}
                                    saveConfirm={this.appeal_save}
                                    type="edit"
                                />
                            </Suspense>
                            {/* 产品自荐入库理由 */}
                            <Suspense fallback={null}>
                                <RecommendReason
                                    data={this.state.infoData.reason}
                                    saveConfirm={this.reason_save}
                                    type="edit"
                                />
                            </Suspense>
                        </div>
                    </Tabs.TabPane>
                    {/* 变更记录 */}
                    <Tabs.TabPane tab="变更记录" key="n">
                        <div style={{ width: '82%', margin: '0 auto' }}>
                            <ChangeRecord 
                                data={this.state.change_record}
                            />
                        </div>
                    </Tabs.TabPane>
                    {/* 制表记录 */}
                    {/* <Tabs.TabPane tab="制表记录" key="k">
                        <div style={{ width: '82%', margin: '0 auto' }}>
                            <MakeTableRecord 
                                 data={this.state.tabulating_record}
                            />
                        </div>
                    </Tabs.TabPane> */}
                </Tabs>
            </PageHeaderWrapper>
        )
    }
}

export default BasicList